import { Button, Modal } from 'antd'
import ReactDOM from 'react-dom/client'

const PreloadError: React.FC = () => {
  return (
    <Modal
      title="页面内容发生更新"
      classNames={{
        mask: 'preload-error-mask'
      }}
      closable={false}
      open={true}
      footer={
        <Button type="primary" onClick={() => window.location.reload()}>
          确认
        </Button>
      }
    >
      <p>请点击确认按钮刷新页面</p>
    </Modal>
  )
}

// 当 Vite 加载动态导入失败时，会触发 vite:preloadError 事件
window.addEventListener('vite:preloadError', event => {
  console.warn('vite:preloadError', event)
  event.preventDefault()
  const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
  root.render(<PreloadError />)
})
